<template>
    <el-container>
        <el-header style="padding: 0; height: 50px;">
            <div class="recordapi__header">
                <div class="recordapi__header--item" :style="{paddingLeft: '2px'}">
                    <el-checkbox
                        v-if="apiData.count > 0"
                        v-model="checked"
                        style="padding-top: 14px; padding-left: 2px"
                    >
                    </el-checkbox>
                </div>
                <div class="recordapi__header--item">
                    <el-input placeholder="请输入接口名称" clearable v-model="search" v-on="getAPIList"
                              style="width: 400px">
                        <template #append>
                            <el-button  icon="search" @click="getAPIList"></el-button>
                        </template>
                    </el-input>
                </div>
                <div class="recordapi__header--item">
                    <el-button
                        type="primary"
                        @click="resetSearch"
                    >重置
                    </el-button>
                </div>
                <div class="recordapi__header--item">
                    <el-dropdown @command="tagChangeHandle">
                        <el-button type="primary">
                            状态
                            <el-icon><ArrowDown /></el-icon>
                        </el-button>
                        <template #dropdown>
                        <el-dropdown-menu >
                            <el-dropdown-item command="1">成功</el-dropdown-item>
                            <el-dropdown-item command="0">未知</el-dropdown-item>
                            <el-dropdown-item command="2">失败</el-dropdown-item>
                            <!--                            <el-dropdown-item command="3">自动成功</el-dropdown-item>-->
                            <el-dropdown-item command="">所有</el-dropdown-item>
                        </el-dropdown-menu>
                         </template>
                    </el-dropdown>
                </div>

                <div class="recordapi__header--item">
                    <el-pagination
                        style="margin-top: 5px"
                        :page-size="11"
                        v-show="apiData.count !== 0 "
                        background
                        @current-change="handleCurrentChange"
                        v-model="currentPage"
                        layout="total, prev, pager, next, jumper"
                        :total="apiData.count"
                    >
                    </el-pagination>
                </div>
            </div>
        </el-header>

        <el-container>
            <el-main style="padding: 0; margin-left: 10px;">
                <el-dialog
                    v-if="dialogTableVisible"
                    v-model="dialogTableVisible"
                    width="70%"
                >
                    <report :summary="summary"></report>
                </el-dialog>

                <el-dialog
                    title="Run API"
                    v-model="dialogTreeVisible"
                    width="45%"
                >
                <div>
                        <div>
                            <el-row :gutter="2">
                                <el-col :span="8">
                                    <el-switch
                                        style="margin-top: 10px"
                                        v-model="asyncs"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949"
                                        active-text="异步执行"
                                        inactive-text="同步执行">
                                    </el-switch>
                                </el-col>
                                <el-col :span="10">
                                    <el-input
                                        v-show="asyncs"
                                        clearable
                                        placeholder="请输入报告名称"
                                        v-model="reportName"
                                        :disabled="false">
                                    </el-input>

                                </el-col>
                            </el-row>
                        </div>
                        <div style="margin-top: 20px">
                            <el-input
                                placeholder="输入节点名称进行过滤"
                                v-model="filterText"
                                size="medium"
                                clearable
                                prefix-icon="search"
                            >
                            </el-input>

                            <el-tree
                                :filter-node-method="filterNode"
                                :data="dataTree"
                                show-checkbox="true"
                                node-key="id"
                                :expand-on-click-node="false"
                                check-on-click-node
                                :check-strictly="true"
                                :highlight-current="true"
                                ref="tree1"
                            >
                            <template #default="{ node, data }">
                                <span class="custom-tree-node">
                                    <span><i class="iconfont" v-html="expand"></i>&nbsp;&nbsp;{{ node.label }}</span>
                                </span>
                            </template>
                            </el-tree>
                        </div>

                    </div>
                    <template #footer>
                        <span  class="dialog-footer">
                        <el-button @click="dialogTreeVisible = false">取 消</el-button>
                        <el-button type="primary" @click="runTree">确 定</el-button>
                        </span>
                    </template>
                </el-dialog>

                <el-dialog
                    title="Move API"
                    v-model="dialogTreeMoveAPIVisible"
                    width="45%"
                >
                    <div>
                        <div style="margin-top: 20px">
                            <el-input
                                placeholder="输入节点名称进行过滤"
                                v-model="filterText"
                                size="medium"
                                clearable
                                prefix-icon="search"
                            >
                            </el-input>

                            <el-tree
                                :filter-node-method="filterNode"
                                :data="dataTree"
                                show-checkbox="true"
                                node-key="id"
                                :expand-on-click-node="false"
                                check-on-click-node
                                :check-strictly="true"
                                :highlight-current="true"
                                ref="tree2"
                            >
                                <template #default="{ node }">
                                    <span class="custom-tree-node">
                                        <span><i class="iconfont" v-html="expand"></i>&nbsp;&nbsp;{{ node.label }}</span>
                                    </span>
                                </template>
                                  
                            </el-tree>
                        </div>

                    </div>
                    <template #footer>
                        <span  class="dialog-footer">
                            <el-button @click="dialogTreeMoveAPIVisible = false">取 消</el-button>
                            <el-button type="primary" @click="moveAPI">确 定</el-button>
                        </span>
                    </template>
                </el-dialog>


                <div style="position: fixed; bottom: 0; right:0; left: 460px; top: 160px">
                    <el-table
                        highlight-current-row
                        height="calc(100%)"
                        ref="multipleTable"
                        :data="apiData.results"
                        :show-header="false"
                        :cell-style="{paddingTop: '4px', paddingBottom: '4px'}"
                        @cell-mouse-enter="cellMouseEnter"
                        @cell-mouse-leave="cellMouseLeave"
                        style="width: 100%;"
                        @selection-change="handleSelectionChange"
                        v-loading="loading"
                    >
                        <el-table-column
                            type="selection"
                            width="42"
                        >
                        </el-table-column>
                        <el-table-column
                            width="25"
                        >
                            <template #default={scope}>
                                <el-dropdown @command="dropdownMenuChangeHandle">
                                    <span><el-icon><More /></el-icon></span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item disabled style="background-color: #e2e2e2">选中({{ selectAPI.length }} 条)</el-dropdown-item>
                                            <el-dropdown-item :disabled="selectAPI.length === 0" command="success">更新为成功</el-dropdown-item>
                                            <el-dropdown-item :disabled="selectAPI.length === 0" command="fail">更新为失败</el-dropdown-item>
                                            <el-dropdown-item :disabled="selectAPI.length === 0" command="deprecated">更新为废弃</el-dropdown-item>
                                            <el-dropdown-item :disabled="selectAPI.length === 0" command="move">移动API</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </template>

                        </el-table-column>

                        <el-table-column
                            min-width="325"
                            align="center"
                        >
                            <template v-slot="scope">
                                <div class="block" :class="`block_${scope.row.method.toLowerCase()}`">
                                    <span class="block-method block_method_color"
                                          :title="'API分组：' +scope.row.relation_name"
                                          :class="`block_method_${scope.row.method.toLowerCase()}`">
                                        {{ scope.row.method.toUpperCase() }}
                                    </span>
                                    <span class="block-method block_url">{{ scope.row.url }}</span>
                                    <span class="block-summary-description">{{ scope.row.name }}</span>
                                    <div>
                                       <span class="flag"
                                             v-if="scope.row.cases.length > 0 "
                                             :title="'API已经被用例引用,共计: '+scope.row.cases.length + '次'">
                                       </span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column
                            prop="tag"
                            label="标签"
                            width="90"
                            filter-placement="bottom-end">
                            <template v-slot="scope">
                                <el-tag
                                    :type="scope.row.tag === 0 ? 'info' : scope.row.tag === 2 ? 'danger' : 'success' "
                                    effect="light"
                                >
                                    {{ scope.row.tag_name }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template v-slot="scope">
                                <el-row v-show="currentRow === scope.row">
                                    <el-button
                                        type="info"
                                        circle size="mini"
                                        @click="handleRowClick(scope.row)"
                                    ><el-icon><Edit /></el-icon></el-button>

                                    <el-button
                                        type="success"
                                        title="复制API"
                                        circle size="mini"
                                        @click="handleCopyAPI(scope.row.id, scope.row.name)"
                                    >
                                    <el-icon><CopyDocument /></el-icon>
                                    </el-button>

                                    <el-button
                                        type="primary"
                                        title="运行API"
                                        circle size="mini"
                                        @click="handleRunAPI(scope.row.id)"
                                    ><el-icon><Position /></el-icon></el-button>

                                    <el-popover
                                        style="margin-left: 10px"
                                        trigger="hover"
                                    >                                        
                                        <template #default>
                                        <div style="text-align: center">

                                            <el-button
                                                type="danger"
                                                icon="delete"
                                                :title="userName === scope.row.creator || isSuperuser ? '删除' : '只有API创建者才能删除'"
                                                :disabled="userName != scope.row.creator && !isSuperuser"
                                                circle size="mini"
                                                @click="handleDelApi(scope.row.id)"
                                            >
                                            </el-button>
                                            <el-button
                                                v-show="(userName === scope.row.creator || isSuperuser ) && scope.row.cases.length>0"
                                                :disabled="userName != scope.row.creator && !isSuperuser"
                                                type="warning"
                                                icon="refresh"
                                                :title="userName === scope.row.creator || isSuperuser ? '同步用例步骤' : '同步用例权限不足'"
                                                circle size="mini"
                                                @click="handleSyncCaseStep(scope.row.id)"
                                            >
                                            </el-button>
                                        </div>
                                    </template>
                                    <template #reference>
                                            <el-button icon="more" title="更多" circle size="mini"></el-button>
                                    </template>

                                    </el-popover>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Report from '../../../reports/DebugReport.vue'

export default {
    components: {
        Report
    },
    name: "ApiList",
    props: {
        host: {
            require: true
        },
        config: {
            require: true
        },
        run: Boolean,
        move: Boolean,
        back: Boolean,
        pNode: {
            require: true
        },
        project: {
            require: true
        },
        del: Boolean,
        listCurrentPage: Number,
        visibleTag: [Number, String],
        rigEnv: [Number, String],
        onlyMe: Boolean,
        isSelectAPI: Boolean
    },
    data() {
        return {
            isSuperuser: this.$store.state.is_superuser,
            userName: this.$store.state.user,
            checked: false,
            search: '',
            reportName: '',
            asyncs: false,
            filterText: '',
            loading: false,
            expand: '&#xe65f;',
            dataTree: {},
            dialogTreeVisible: false,
            dialogTreeMoveAPIVisible: false,
            dialogTableVisible: false,
            summary: {},
            selectAPI: [],
            currentRow: '',
            currentPage: this.listCurrentPage,
            node: '', 
            apiData: {
                count: 0,
                results: []
            },
            // tag: this.visibleTag,
            // rigEnv: this.rigEnv,
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },

        run() {
            this.asyncs = false;
            this.reportName = "";
            this.getTree('run');
        },

        move() {
            this.asyncs = false;
            this.reportName = "";
            this.getTree('move');
        },

        back() {
            this.getAPIList();
        },
        pNode() {
            this.node = this.pNode
            this.search = '';
            this.getAPIList();
        },
        checked() {
            if (this.checked) {
                this.toggleAll();
            } else {
                this.toggleClear();
            }
        },

        del() {
            if (this.selectAPI.length !== 0) {
                this.$confirm('此操作将永久删除API，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.$api.delAllAPI({data: this.selectAPI}).then(resp => {
                        this.getAPIList();
                    })
                }).catch(e => e)
            } else {
                this.$notify.warning({
                    title: '提示',
                    message: '请至少选择一个接口',
                    duration: this.$store.state.duration
                })
            }
        },
        // 监听listCurrentPage的变化,修改原本currentPage的值
        // 因为原本有些函数用到的值是currentPage,所以不能直接修改currentPage的值.
        listCurrentPage(newValue) {
            this.currentPage = newValue
        },

        // 监听只看自己按钮的状态
        onlyMe() {
            this.getAPIList()
        },
        search() {
            this.getAPIList()
        }
    },

    methods: {
        tagChangeHandle(command) {
            // this.tag = command;
            this.$emit('update:visibleTag', command);
            this.getAPIList();
        },
        dropdownMenuChangeHandle(command) {
            let tag = -1
            switch (command) {
                case 'success':
                    tag = 1
                    break;
                case 'fail':
                    tag = 2
                    break;
                case 'deprecated':
                    tag = 4
                    break;
                case 'move':
                    this.$emit("update:move", !this.move)
                    break;
            }
            if (command !== 'move') {
                console.log("!=move...")
                let api_ids = []
                for (let selectAPIElement of this.selectAPI) {
                    api_ids.push(selectAPIElement.id)
                }
                this.$api.tagAPI({
                    tag: tag,
                    api_ids: api_ids,
                }).then(resp => {
                    this.selectAPI = []
                    this.checked = false
                    if (resp.success) {
                        this.getAPIList();
                    } else {
                        this.$message.error(resp.msg);
                    }
                })
            }
        },
        rigEnvChangeHandle(command) {
            // this.rigEnv = command;
            this.$emit('update:rigEnv', command);
            this.getAPIList();
        },
        resetSearch() {
            this.search = "";
            this.node = "";
            this.$emit('update:listCurrentPage', 1)
            // this.tag = "";
            // this.$emit('update:tag', '');
            this.$emit('update:visibleTag', '');
            this.$emit('update:rigEnv', '');
            this.$emit('update:onlyMe', true);
            this.getAPIList();
        },
        handleOnlyMeChange() {
            this.$emit('update:onlyMe', this.onlyMe);
            this.getAPIList()
        },
        handleCopyAPI(id, name) {
            this.$prompt('请输入接口名称', '提示', {
                confirmButtonText: '确定',
                inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/,
                inputErrorMessage: '接口名称不能为空',
                inputValue: name,
            }).then(({value}) => {
                this.$api.copyAPI(id, {
                    'name': value
                }).then(resp => {
                    if (resp.success) {
                        this.getAPIList();
                    } else {
                        this.$message.error(resp.msg);
                    }
                })
            })
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },

        runTree() {
            this.dialogTreeVisible = false;
            const relation = this.$refs.tree1.getCheckedKeys();
            if (relation.length === 0) {
                this.$notify.error({
                    title: '提示',
                    message: '请至少选择一个节点',
                    duration: 1500
                });
            } else {
                this.$api.runAPITree({
                    "host": this.host,
                    "project": this.project,
                    "relation": relation,
                    "async": this.asyncs,
                    "name": this.reportName,
                    "config": this.config
                }).then(resp => {
                    if (resp.hasOwnProperty("status")) {
                        this.$message.info({
                            message: resp.msg,
                            duration: 1500
                        });
                    } else {
                        this.summary = resp;
                        this.dialogTableVisible = true;
                    }

                })
            }
        },
        moveAPI() {
            this.dialogTreeVisible = false;
            const relation = this.$refs.tree2.getCheckedKeys();
            let length = relation.length;
            if (length === 0) {
                this.$notify.error({
                    title: '提示',
                    message: '请至少选择一个节点',
                    duration: 1500
                });
            } else if (length !== 1) {
                this.$notify.error({
                    title: '提示',
                    message: 'API只能移动到一个节点, 现在选了' + length + '个节点',
                    duration: 1500
                });
            } else {
                this.$api.moveAPI({
                    "project": this.project,
                    "relation": relation[0],
                    "api": this.selectAPI
                }).then(resp => {
                    this.selectAPI = []
                    this.checked = false
                    if (resp.success) {
                        this.$message.success({
                            message: '移动API成功',
                            duration: 1500
                        });
                        this.dialogTreeMoveAPIVisible = false
                        this.resetSearch()
                    } else {
                        this.$message.error({
                            message: resp.msg,
                            duration: 1500
                        })
                    }
                })
            }
        },
        getTree(showType) {
            this.$api.getTree(this.$route.params.id, {params: {type: 1}}).then(resp => {
                this.dataTree = resp.tree;
                // run是批量运行api弹窗，其他是批量更新api relation弹窗
                if (showType === 'run') {
                    this.dialogTreeVisible = true;
                } else {
                    this.dialogTreeMoveAPIVisible = true;
                }
            })
        },

        handleSelectionChange(val) {
            this.selectAPI = val;
            // 更新是否已经选择API, 父组件依赖这个属性来判断是否显示Move API按钮
            if (this.selectAPI.length > 0) {
                this.$emit('update:isSelectAPI', true);
            } else {
                this.$emit('update:isSelectAPI', false);
            }

        },

        toggleAll() {
            this.$refs.multipleTable.toggleAllSelection();
        },

        toggleClear() {
            this.$refs.multipleTable.clearSelection();
        },
        // 查询api列表
        getAPIList() {
            // debugger
            this.$nextTick(() => {
                this.$api.apiList({
                    params: {
                        page: this.listCurrentPage,
                        node: this.node,
                        project: this.project,
                        search: this.search,
                        tag: this.visibleTag,
                        rigEnv: this.rigEnv,
                        onlyMe: this.onlyMe,
                    }
                }).then(res => {
                    this.apiData = res;
                })
            })
        },


        handleCurrentChange(val) {
            this.$api.getPaginationBypage({
                params: {
                    page: this.currentPage,
                    node: this.node,
                    project: this.project,
                    search: this.search,
                    tag: this.visibleTag,
                    rigEnv: this.rigEnv,
                    onlyMe: this.onlyMe,
                }
            }).then(res => {
                this.apiData = res;
                this.$emit("click-pager", val)
            })
        },

        //删除api
        handleDelApi(index) {
            this.$confirm('此操作将永久删除该API，是否继续???', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.$api.delAPI(index).then(resp => {
                    if (resp.success) {
                        this.getAPIList();
                    } else {
                        this.$message.error(resp.msg);
                    }
                })
            })
        },
        handleTagApi(index, tag) {
            if (tag == "success" || tag == "bug") {
                this.$api.tagAPI(index, {
                    tag: tag === "success" ? 1 : 2
                }).then(resp => {
                    if (resp.success) {
                        this.getAPIList();
                    } else {
                        this.$message.error(resp.msg);
                    }
                })
            }
        },
        // api同步用例步骤
        handleSyncCaseStep(id) {
            this.$confirm('是否确定把当前api同步到用例步骤', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.$api.syncCaseStep(id).then(resp => {
                    if (resp.success) {
                        this.getAPIList();
                        this.$notify.success({
                            title: '提示',
                            message: '用例步骤同步成功',
                            duration: 1500
                        })
                    } else {
                        this.$message.error(resp.msg);
                    }
                })
            }).catch(e => e)
        },
        // 编辑API
        handleRowClick(row) {
            this.$api.getAPISingle(row.id).then(resp => {
                if (resp.success) {
                    this.$emit('api', resp);
                } else {
                    this.$message.error(resp.msg)
                }
            })
        },
        // 运行API
        handleRunAPI(id) {
            this.loading = true;
            this.$api.runAPIByPk(id, {
                params: {
                    host: this.host,
                    config: this.config
                }
            }).then(resp => {
                this.summary = resp;
                this.dialogTableVisible = true;
                this.loading = false;
            }).catch(resp => {
                this.loading = false;
            })
        },

        cellMouseEnter(row) {
            this.currentRow = row;
        },

        cellMouseLeave(row) {
            this.currentRow = '';
        }
    }
    ,
    mounted() {
        this.getAPIList();
    }
}
</script>

<style scoped>
.recordapi__header {
    display: flex;
    align-items: center;
}

.recordapi__header--item.is-strench {
    flex: 1;
}

.recordapi__header--item {
    margin: 0 8px;
}
</style>
